<template>
    <div class="conn">
        <lay-card title="历史记录">
            <template v-slot:extra>
                <lay-button type="primary" fluid @click="handleClear">清空历史记录</lay-button>
            </template>
            <lay-row space="5" class="list" id="scroll">
                <lay-col lg="3" md="4" sm="6" xs="8" class="list_item" v-for="(item,index) in storeMain.publicmain.historylist">
                    <div class="item_body" @click="handleShowInfo(item.vod_id,item.history_ziyuanurl,item.history_ziyuanname,item.playurl)">
                        <img :src="item.vod_pic" width="" alt="">
                        <div class="ziyuan">{{item.history_ziyuanname}}</div>
                        <div class="type">{{item.type_name}}</div>
                        <div class="order">当前：{{item.playorder}}</div>
                        <div class="info">
                            <div class="name">{{item.vod_name}}</div>
                            <div class="name">{{item.vod_remarks}}</div>
                            <div class="time">{{item.vod_time}}</div>
                        </div>
                    </div>
                </lay-col>
                <!--<div class="loadmore" @click="handleGetMore()">-->
                <!--    (总{{storeMain.vedio.total}}条，当前第{{storeMain.vedio.page}}页,共{{storeMain.vedio.pagecount}}页)加载更多...-->
                <!--</div>-->
            </lay-row>
        </lay-card>
    </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useStoreMain} from '../../store/storeindex.js';
const storeMain = useStoreMain();

function handleShowInfo(id, history_ziyuanurl, history_ziyuanname, playurl) {
    storeMain.vedio.info_ziyuanurl = history_ziyuanurl;
    storeMain.vedio.info_ziyuanname = history_ziyuanname;
    storeMain.vedio.infoid = id;
    // storeMain.vedio.playurl = playurl;
    storeMain.vedio.infoDialogShow = true;
    storeMain.vedio.currenttab = 2;
    storeMain.vedio.getDetail('history');

}
function handleClear() {
    $utilstoken.clearStorage('history');
    storeMain.publicmain.historylist = $utilstoken.getStorage('history');
}
onMounted(() => {
    storeMain.publicmain.ziyuanurl = $utilstoken.getStorage('ziyuanurl');
    storeMain.publicmain.historylist = $utilstoken.getStorage('history');
})
</script>
<style lang="scss" scoped>
.conn {
    padding: 10px;
    height: 100%;
    background-color: var(--base_bgcolor);
    .layui-card {
        overflow-y: auto;
        height: 100%;
        .list {
            position: relative;
            width: 100%;
            .list_item {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-flow: column;
                padding: 5px;
                border: 0px solid #000;
                &:hover {
                    transform: scale(1.01);
                }
                .item_body {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    background-color: #fff;
                    border: 0px solid #e1dfdf;
                    overflow: hidden;
                    .type {
                        position: absolute;
                        top: 30px;
                        left: 5px;
                        width: 60px;
                        padding-left: 5px;
                        line-height: 25px;
                        border-radius: 5px;
                        background-color: rgb(34 31 31 / 70%);
                        color: #fff;
                    }
                    .ziyuan {
                        position: absolute;
                        top: 3px;
                        left: 5px;
                        width: 150px;
                        padding-left: 5px;
                        line-height: 25px;
                        border-radius: 5px;
                        background-color: rgb(34 31 31 / 70%);
                        color: #fff;
                    }
                    .order {
                        position: absolute;
                        top: 60px;
                        left: 5px;
                        width: 150px;
                        padding-left: 5px;
                        line-height: 25px;
                        border-radius: 5px;
                        background-color: rgb(34 31 31 / 70%);
                        color: #fff;
                    }
                    img {
                        width: 100%;
                        height: 200px;
                        object-fit: cover;
                    }
                    .info {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        padding: 5px;
                        background-color: rgb(34 31 31 / 70%);
                        border: 1px solid #000;
                        .name {
                            height: 20px;
                            overflow: hidden;
                            color: #fff;
                        }
                        .time {
                            color: #dedbdb;
                        }
                    }
                }
            }
        }
    }
}
</style>
